<template>
    <div>
      <form @submit.prevent="onSubmit">
        <input v-model="username" type="text" />
        <input v-model="password" type="password" />
        <button type="submit">注册</button>
      </form>
    </div>
  </template>
  
  <script>
  export default {
    data() {
      return {
        username: '',
        password: ''
      };
    },
    methods: {
      onSubmit() {
        this.$refs.myForm.validate((valid) => {
          if (valid) {
            // 使用箭头函数，确保this指向Vue实例
            this.registerUser({ username: this.username, password: this.password })
              .then(response => {
                console.log(response);
              })
              .catch(error => {
                console.error(error);
              });
          }
        });
      },
      // 假设这是注册用户的异步方法
      registerUser(credentials) {
        return new Promise((resolve, reject) => {
          // 模拟异步操作
          setTimeout(() => {
            if (credentials.username && credentials.password) {
              resolve({ message: '注册成功' });
            } else {
              reject({ message: '用户名和密码不能为空' });
            }
          }, 1000);
        });
      }
    }
  };
  </script>